<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言</title>
		<style type="text/css">
			textarea {
				width: 300px;
				height: 200px;
				font-size: 15px;
			}

			ul>li {
				margin: 10px;
				width: 300px;
				height: 20px;
				font-size: 15px;
				line-height: 20px;
				background-color: aquamarine;
			}

			ul>li a {
				float: right;
			}
		</style>
	</head>
	<body>
		<textarea></textarea>
		<button>发布</button>
		<ul>
		</ul>
		<script type="text/javascript">
			var btn = document.querySelector('button');
			var text = document.querySelector('textarea');
			var ul = document.querySelector('ul');
			btn.onclick = function() {
				if (text.value == '') {
					alert('请输入内容！');
				} else {
					//创建元素
					var li = document.createElement('li');
					li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
					// 添加元素
					// ul.appendChild(li);
					ul.insertBefore(li, ul.children[0])
					// 删除当前链接的li（父亲）
					var as = document.querySelectorAll('a');
					for (var i = 0; i < as.length; i++) {
						as[i].onclick = function(){
							// 删除父亲
							ul.removeChild(this.parentNode);
						}
					}
				}
			}
		</script>
	</body>
</html>
